<template>
    <div class="pzh-map">
        <div id="map"></div>
    </div>
</template>


<script>
    import "echarts-gl";
    import json from "@/assets/pzh.json";
    import lines from "@/assets/lines.json";
    export default {
        data() {
            return {
                option: {},
                mapDate: [],
                map: 'map',
                echartObj: null,
                lineList:[],
                lineDataList:[],
                scdata :[
                    {"name":"格里坪水厂","jwd":[101.540352,26.59475962],"value": 439},
                    {"name":"陶家渡水厂","jwd":[101.5770131,26.59485736 ],"value": 658},
                    {"name":"河门口水厂","jwd":[101.614385,26.59377996],"value": 598},
                    {"name":"荷花池水厂","jwd":[101.6636982,26.57232141 ],"value": 2128},
                    {"name":"小宝鼎水厂","jwd":[101.6638765,26.565239],"value":0},
                    {"name":"大渡口水厂","jwd":[101.7007566,26.5636036],"value":1396},
                    {"name":"炳草岗水厂","jwd":[101.7057822,26.577271],"value":3104},
                    {"name":"密地水厂","jwd":[101.7431655,26.580436],"value":875},
                    {"name":"金江水厂","jwd":[101.853262,26.536507],"value":3810},
                    {"name":"马店河水厂","jwd":[101.8607733,26.53461],"value":0}]

            }
        },
        created() {
            let list=[];
            let dataList=[];
            let tempList ={name:'1line',coords:[]};
            lines.forEach((item,index)=>{
                if(index%10==0||index==lines.length-1){
                    if((index%60==0||index==lines.length-1)&&index!=0){
                        tempList.coords.push(item);
                        dataList.push(tempList);
                        tempList={name:index+'line',coords:[]};
                    }else{
                        tempList.coords.push(item);
                    }
                    list.push(item)
                    if(index==lines.length-1){
                        this.lineList=list
                        this.lineDataList = dataList;
                        setTimeout(() => {
                            this.initChart()
                        }, 1000)
                    }
                }
            })

        },
        methods: {
            initChart() {
                // 获取各地区经纬度中心点
                const proviceCenter = new Map()
                json.features.forEach((provice) => {
                    proviceCenter.set(provice.properties.name, provice.properties.centroid)
                })
                // 合并数据
                const barData = json.features.map((item) => {
                    return {
                        name: item.properties.name,
                        value: [...proviceCenter.get(item.properties.name), 1]
                    }
                })
                var myChart = this.$echarts.init(document.getElementById('map'))
                this.$echarts.registerMap("pzh", json);
                const option = {
                    visualMap: [
                    //     {
                    //     show: false,
                    //     text: ['bar3D'],
                    //     calculable: true,
                    //     seriesIndex: 0,
                    //     min: 1,
                    //     max: 2,
                    //     inRange: {
                    //         color: ['rgba(0, 143, 155,0.1)', 'rgba(0, 143, 155,1)']
                    //     }
                    // }, 
                    ],
                    geo3D: {
                        map: 'pzh',
                        // 区域边界高度
                        regionHeight: 0.02,
                        // 真实感渲染
                        shading: 'realistic',
                        // 将地图设置一个摆放平台
                        groundPlane: {
                            show: false,
                            color: '#666'
                        },
                        label: { // 标签的相关设置
                            show: true, // (地图上的城市名称)是否显示标签 [ default: false ]
                            distance:0,
                            opacity: 1,
                            fontSize:17,
                            color: '#f5f88e', // 地图初始化区域字体颜色
                            borderWidth:0,
                        },
                        // realisticMaterial: {
                        //   detailTexture: './earth.jpg'
                        // },
                        // 视角控制
                        viewControl: {
                            projection: 'perspective',
                            panSensitivity:1,
                            panMouseButton: 'right',
                            // 距离
                            distance: 40,
                            // 角度
                            alpha: 30,
                            center :[0,0,20],
                            minDistance : 2,
                            beta: 10,
                            animationDurationUpdate: 10,
                            autoRotate: false,
                            minBeta: -120,
                            maxBeta: 120
                        },
                        // 灯光
                        // light: {
                        //   main: {
                        //     // color: '#687',
                        //     intensity: 1.2, // 光照强度
                        //     shadowQuality: 'high', // 阴影亮度
                        //     shadow: true, // 是否显示阴影
                        //     alpha: 45,
                        //     beta: -25
                        //   },
                        //   ambientCubemap: {
                        //     diffuseIntensity: 1.2,
                        //     // 光源材质
                        //     texture: './light.png'
                        //   }
                        // },
                        // 区块颜色及边线设置
                        itemStyle: {
                            label: {
                                show: true
                            },
                            borderColor: '#489',
                            borderWidth: .5,
                            color: 'rgba(8,24,39,0.1)',
                        },
                        // hover时样式
                        emphasis: {
                            label: {
                                show: true
                            },
                            itemStyle: {
                                color: 'rgb(27,110,184)'
                            }
                        }
                    },
                    series: [
                       {
                           type: 'lines3D',
                           coordinateSystem: 'geo3D',
                           zlevel: 1,
                            polyline: true,
                           effect: {
                               show: true,
                               period: 0.6, //箭头指向速度，值越小速度越快
                               trailLength: 1, //特效尾迹长度[0,1]值越大，尾迹越长重
                               symbol: 'pin', //箭头图标
                               symbolSize: 8, //图标大小
                               color: 'red'
                           },
                           lineStyle: {
                               normal: {
                                   color: '#6ab771',
                                   width: 2, //尾迹线条宽度
                                   opacity: .9, //尾迹线条透明度
                                   curveness: .3 //尾迹线条曲直度
                               }
                           },

                           data:this.lineDataList,
                       },



                    ]
                }
                let data = [ // 散点数据
                    {
                        name: '',
                        color:'blue',
                        value: [this.lineList[0][0], this.lineList[0][1], 0],
                        position :'bottom'
                    },
                    {
                        name: '',
                        color:'blue',
                        value: [this.lineList[this.lineList.length-1][0], this.lineList[this.lineList.length-1][1], 0],
                        position :'top'
                    },
                ]

                this.scdata.map((item) => {
                    var pos = 'top';
                    if(item.name == '小宝鼎水厂'|| item.name == '马店河水厂'){
                        pos ='bottom'
                    }

                    data.push({
                        name: item.name,
                        value: [item.jwd[0], item.jwd[1]],
                        color: '#FFF'
                        ,position: pos

                    })
                })

                for (let i = 0; i < data.length; i++) {
                    option.series.push( {
                            name: 'scatter3D',
                            type: "scatter3D",
                            coordinateSystem: 'geo3D',
                            symbol: 'circle',
                            symbolSize: 10,
                            label: {
                                show: true, //是否显示点上面的标签，默认false
                                formatter:  data[i].name?data[i].name:' ',
                                color: 'rgba(255,255,255,0.9)',
                                fontSize:9,
                                position:  data[i].position? data[i].position:'top',
                            },
                            itemStyle: {
                                borderWidth: 0,
                                borderColor: 'blue',
                                color: data => {
                                    return data.data.color
                                }

                            },
                            data: [ // 散点数据
                                data[i]
                                 ]
                        }
                    )
                }

                myChart.setOption(option);


            },
            convertData() { // 处理数据函数
                let data = [ // 散点数据
                    {
                        name: '',
                        color:'blue',
                        value: [this.lineList[0][0], this.lineList[0][1], 0],
                    },
                    {
                        name: '',
                        color:'blue',
                        value: [this.lineList[this.lineList.length-1][0], this.lineList[this.lineList.length-1][1], 0],
                    },
                ]
               this.scdata.map((item) => {
                   var pos = 'top';
                   if(item.name == '小宝鼎水厂'|| item.name == '马店河水厂'){
                       pos ='bottom'
                   }

                   data.push({
                       name: item.name,
                       value: [item.jwd[0], item.jwd[1]],
                       color: '#FFF'
                       ,position: 'bottom'

                   })
                })
                var tem = [];
                for (let i = 0; i <data.length ; i++) {
                    var  t = new Object();
                    t =JSON. parse (JSON. stringify (this.convertDataInfo(data[i])))
                    var t2= {
                        name: 'scatter3D',
                        type: "scatter3D",
                        coordinateSystem: 'geo3D',
                        symbol: 'circle',
                        symbolSize: 10,
                        label: {
                            show: true, //是否显示点上面的标签，默认false
                            color: 'rgba(255,255,255,0.9)',
                            fontSize: 10,
                            position: t.position ? t.position : 'top'
                        }
                        ,
                        itemStyle: {
                            borderWidth: 0,
                            fontSize: 30,
                            borderColor: 'blue',
                        },
                        data: t
                    }
                    tem.push(t2)
                }
                return tem;
            },
            convertDataInfo(va ) { // 处理数据函数
               var temp  ={
                    name: 'scatter3D',
                        type: "scatter3D",
                    coordinateSystem: 'geo3D',
                    symbol: 'circle',
                    symbolSize: 10,
                    label: {
                        show: true, //是否显示点上面的标签，默认false
                        color: 'rgba(255,255,255,0.9)',
                        fontSize: 16,
                        position: va.position ? va.position : 'top'
                    }
                    ,
                    itemStyle: {
                        borderWidth: 0,
                            borderColor: 'blue',
                    },
                    data: va
                }
                return temp ;
            }

        }

    }
</script>


<style lang="scss" scoped>
    .pzh-map {
        width: 100%;
        display: flex;
        justify-content: center;
        position: relative;
    }
        #map{
            position: absolute;
            width: 100vw;height:10rem;
            margin-top: -3rem;

        }
</style>
